<template>
  <div class="banner">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
      v-for="(item,index) in banners"
      :key="index"
      ><img :src="item" v-lazy='item' alt=""></van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import api from '@/api'
export default {
  data() {
    return {
        banners: []
    };
  },
  async mounted() {
      this.banners = await this.$request({
          url:api.bannerApi,
      })
  }
};
</script>

<style lang="scss" scoped>
.banner {
  width: 375px;
  height: 200px;
  .my-swipe .van-swipe-item {
    height: 200px;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
  }
  img{
        width: 375px;
        height: 200px;
    }
}
</style>